<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card style="padding: 20px">
        <!-- 头部的左右布局 -->
        <tree-tools
          :node-data="{ name: '传智教育', manager: '负责人', id: '' }"
          :is-root="false"
          style="border-bottom: 1px solid #ccc; padding: 10px"
          @showDialog="showDialog"
        />
        <!-- 测试树形组件
          data属性是树形控件的数据: 数组包对象 对象的属性label默认用户展示  childern属性默认父子关联
          props 属性 修改默认的展示的文本属性和父子关联的属性  { label: "name",  children: "childs",}
          default-expand-all 默认展开所有节点
          show-checkbox  为节点添加复选框
        -->
        <el-tree :data="list" :props="props" default-expand-all>
          <!-- 作用域插槽上解构出来的data是 每一行叶子节点的数据 -->
          <template #default="{ data }">
            <tree-tools
              :node-data="data"
              @reload="getDeptsList"
              @showDialog="showDialog"
              @editDialog="editDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门的对话框 -->
      <add-depts
        ref="addDeptsRef"
        :visible.sync="visible"
        :node-data="nodeData"
        :source-depts="sourceDepts"
        @closeDialog="visible = false; getDeptsList()"
      />
    </div>
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { reqGetDeptsList } from '@/api/departments'
import { tranListToTreeData } from '@/utils/departments'
import AddDepts from './components/add-depts.vue'
export default {
  name: 'Departments',
  components: { treeTools, AddDepts },
  data() {
    return {
      list: [], // 部门列表数据
      props: {
        label: 'name'
      },
      visible: false, // 控制对话框的布尔值
      nodeData: {}, // 点击部门记录部门信息
      sourceDepts: []// 部门列表源数据
    }
  },
  created() {
    this.getDeptsList()
  },
  methods: {
    // 获取部门列表
    async getDeptsList() {
      const { data: { depts }} = await reqGetDeptsList()
      // console.log(depts) //
      // 1. 将源数据存储在父组件中
      this.sourceDepts = depts
      // 将部门列表数据做处理再进行赋值
      this.list = tranListToTreeData(depts, '')
    },
    // 展示对话框并记录点击的部门信息
    showDialog(nodeData) {
      this.visible = true
      // console.log(nodeData)
      this.nodeData = nodeData
      this.$refs.addDeptsRef.title = '添加部门'
    },
    // 点击编辑按钮后, 将点击的部门信息传递过来
    // 在子组件定义一个方法, 父组件直接调用 并且将点击的部门信息传递给addDepts 赋值给form对象
    editDialog(nodeData) {
      this.visible = true
      this.nodeData = nodeData
      // console.log(nodeData)
      // console.log(this.$refs.addDeptsRef)
      // 使用这种方式直接给form赋值, 虽然可以实现部门数据的回显, 但是数据会有滞后性, 放弃
      // 正常的操作应该是在查看按钮点击后,立即去服务器获取一次当前部门的详细信息
      // this.$refs.addDeptsRef.showInfo(nodeData)

      // ---------------------------------------------------
      // 调用子组件add-depts的方法获取部门信息
      this.$refs.addDeptsRef.getDeptInfo(nodeData.id)
      this.$refs.addDeptsRef.title = '编辑部门'
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-tree .el-tree-node__content {
  margin: 5px !important
}
// 直接覆盖树形样式即可
::v-deep .el-tree {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/jiahao.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/jianhao.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/ren.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

}
</style>
